<template>
  <van-pull-refresh v-model="jcrefreshing" @refresh="onjcRefresh">
    <van-list
      v-model="jcloading"
      :finished="jcfinished"
      finished-text="没有更多了"
      @load="onjcLoad"
      offset="10"
    >
      <van-empty
        v-show="jcempty"
        class="custom-image"
        image="https://img.yzcdn.cn/vant/custom-empty-image.png"
        description="目前还没有教程的消息哦"
      />
      <van-skeleton v-show="jcskeleton" style="background-color: #ffffff" title avatar :row="5" v-for="(item,index) of 3" :key="index"/>
      <div class="jcbox-box">
        <div v-for="(item,index) of tutoriallist" :key="index" class="box-msg" @click="gojcisd(item)">
          <div class="msg-img-box">
            <img :src="item.imgs[0]" alt="">
          </div>
          <div class="msg-text">
            <div class="text-theme">
              <span>{{ item.tttheme }}</span>
            </div>
            <div class="text-content">
              <span>{{ item.tocontent }} </span>
            </div>
          </div>
          <div class="msg-cz">
            <div class="cz-le">
              <span>{{ item.newaddTime }}</span>
            </div>
            <div class="cz-rg">
              <div class="cz-box">
                <i class="iconfont icon-dianzan2"></i>
                <span>{{ item.thumbs.length }}</span>
              </div>
              <div class="cz-box">
                <i class="iconfont icon-pinglun3"></i>
                <span>{{ item.comments.length }}</span>
              </div>
              <div class="cz-box">
                <i class="iconfont icon-fenxiang"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </van-pull-refresh>
</template>

<script>
import { ImagePreview, Toast } from 'vant';

export default {
  props: {
    active: {
      default: () => {
        return ''
      }
    },
    uinfo: {
      default: () => {
        return null
      }
    },
  },
  name: 'comjc',
  data(){
    return{
      tutoriallist:[],
      jcloading: false,
      jcfinished: false,
      jcrefreshing: false,
      jcpage: 1,
      maxjcpage: null,
      jcempty: false,
      jcskeleton: false,
      uid: null,
    }
  },
  created() {
    this.jcfind()
  },
  methods:{
    async jcfind() {
      if(this.uinfo){
        this.uid = this.uinfo.uid
      }
      try {
        const res = await this.$axios({
          url: '/blog/tutorialfind',
          method: "post",
          data: {
            page: this.jcpage,
            uid: this.uid,
          }
        })
        const {
          success,
          msg,
          data,
          length,
          maxpage
        } = res.data
        if (success) {
          if(data.rows.length == 0 && this.jcpage == 1){
            this.jcempty = true
          }
          data.rows.map(r => {
            const year = new Date(r.addTime).getFullYear();
            const mouth = `${new Date(r.addTime).getMonth()+1}`.padStart(2, 0);
            const day = `${new Date(r.addTime).getDate()}`.padStart(2, 0);
            r.newaddTime = `${year}-${mouth}-${day}`
            r.imgs = []
            r.pictures.map(url => {
              r.imgs.push(url.photourl)
            })
          })
          data.rows.forEach(r=>{
            this.tutoriallist.push(r)
          })
          this.jcpage++;
          this.maxjcpage = maxpage
          console.info(data.rows)
        } else {
          Toast.fail(msg)
        }
      } catch (e) {
        Toast.fail(e)
      }
    },
    onjcRefresh(){
      this.jcskeleton = true
      this.tutoriallist = []
      setTimeout(() => {
        this.jcpage = 1
        this.jcfind()
        this.jcrefreshing = false;
        this.jcfinished = false;
        this.jcskeleton = false
      }, 1000);
    },
    onjcLoad(){
      console.info("教程加载")
      this.jcloading = true;
      if (this.jcpage > this.maxjcpage) {
        this.jcloading = false;
        this.jcfinished = true;
      }else {
        setTimeout(()=>{
          this.jcfind()
          this.jcloading = false;
        },1000)
      }
    },
    async gojcisd(item) {
      try {
        const res = await this.$axios({
          url: '/blog/tutorialupdate',
          method: "post",
          data: {
            tutorialid: item.tutorialid,
            browse: parseInt(item.browse) + 1,
          }
        })
        const {
          success,
          msg,
          data
        } = res.data
        if (success) {
          item.browse = parseInt(item.browse) + 1
          const params = {
            tutorial: item,
            active: this.active,
          }
          if(this.uinfo){
            params.uinfo = this.uinfo
          }
          this.$router.push({
            name: "jcisd",
            params,
          })
        } else {
          Toast.fail(msg)
        }
      } catch (e) {
        Toast.fail(e)
      }
    },
  }
};
</script>

<style scoped lang="scss">
.box-msg {
  width: vw(690);
  margin: vw(10) auto;

  .msg-img-box {
    img {
      width: 100%;
      height: vw(400);
      object-fit: cover;
    }
  }

  .msg-text {
    display: flex;
    flex-direction: column;
    font-size: vw(28);
    color: #666666;

    &>span {
      &:first-child {
        font-size: vw(40);
        color: #000000;
      }
    }

    .msg-theme {
      span {
        font-size: vw(28) !important;
        color: #666666 !important;
        padding-right: vw(10);
      }
    }
  }

  .msg-cz {
    display: flex;

    .cz-le {
      display: flex;
      align-items: center;

      span {
        font-size: vw(25);
        color: #d5d5d5;
      }
    }

    .cz-rg {
      flex: 1;
      display: flex;
      justify-content: flex-end;

      .cz-box {
        padding: vw(15);
        display: flex;
        align-items: center;

        i {
          font-size: vw(40);
        }

        span {
          margin-left: vw(10);
          font-size: vw(30);
        }
      }
    }
  }
}
</style>
